<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Three框架</title>
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-0-M/three.js/84/three.js"></script>
		<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-0-M/vue/2.6.14/vue.js" type="application/javascript">
		</script>
		<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"
			type="application/javascript">
		</script>
		<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/layui/2.6.8/layui.js"
			type="application/javascript"></script>
		<style type="text/css">
			div#canvas-frame {
				border: none;
				cursor: pointer;
				width: 100%;
				height: 600px;
				background-color: #EEEEEE;
			}
		</style>
		<link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/layui/2.6.8/css/layui.min.css" type="text/css"
			rel="stylesheet" />
	</head>

	<body onload="threeStart();">
		<div id="app">
			<div id="canvas-frame">
			</div>
		</div>
		<div style="position: absolute;bottom:0;right:0">彩叶化学</div>
		<script src="js/tools.js"></script>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					gridShow: true,
					moveX: false,
					moveY: false,
					moveZ: false,
					menu: false,
					bodyListShow: false
				}
			})

			var bodyList = {}
			var bodyNode = []
			var renderer, bodyGroup = new THREE.Group();
			var moveX = null
			var moveY = null
			var moveZ = null
			var bollNum = 0


			var cube;

			function getUrlParam(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) {
					return unescape(r[2]);
				}
				return null;
			}

			function initLine(bid, isShow = true) {

				this.geometry = new THREE.Geometry();
				this.material = new THREE.LineBasicMaterial({
					vertexColors: true
				});
				this.color1 = new THREE.Color(0x444444);
				this.color2 = new THREE.Color(0xFF0000);

				// 线的材质可以由2点的颜色决定
				this.p1 = new THREE.Vector3(-100, 0, 100);
				this.p2 = new THREE.Vector3(100, 0, -100);
				this.geometry.vertices.push(this.p1);
				this.geometry.vertices.push(this.p2);
				this.geometry.colors.push(this.color1, this.color2);
				this.line = new THREE.Line(this.geometry, this.material, THREE.LinePieces);
				this.line.bid = bid
				bodyList[bid] = this.line
				isShow ? scene.add(line) : null;
			}

			function initBoll(r = 50, se = 20, x = 0, y = 0, z = 0, color, isShow = true) {
				this.radius = r,
					this.segemnt = se,
					this.rings = 160;
				if (color == null) color = 0xFFFFFF
				this.sphereMaterial = new THREE.MeshLambertMaterial({
					color
				});

				this.sphere = new THREE.Mesh(
					new THREE.SphereGeometry(this.radius, this.segemnt, this.rings),
					this.sphereMaterial
				);
				this.sphere.position.x = x;
				this.sphere.position.y = y;
				this.sphere.position.z = z;
				this.sphere.geometry.verticesNeedUpdate = true;
				this.sphere.geometry.normalsNeedUpdate = true;
				this.sphere.bid = "c" + (bollNum++)
				bodyList[this.sphere.bid] = this.sphere
				isShow ? bodyGroup.add(this.sphere) : null;
			}

			function initCeng(c, num) {

				if (num == 1) {
					let x = 50 + c * 40,
						y = 0,
						z = 0
					initBoll(10, 20, x, y, z, null, true)
					return
				}
				var R = 2 / num
				for (var i = 0; i < num; i++) {
					let x = (10+ Math.pow(c,0.5) * 150) * Math.cos(i * R * Math.PI),
						y = (10+ Math.pow(c,0.5) * 150) * Math.sin(i * R * Math.PI),
						z = 0
					initBoll(10, 20, x, y, z, null, true)
				}

				return

			}

			function threeStart() {
				initThree();
				initCamera();
				initScene();
				initLight();
				// initLine("l1", false);
				initBoll(80, 30, 0, 0, 0, 0x33CCFF, false);
				for(var i=0;i<Number(getUrlParam("aNum"))?Number(getUrlParam("aNum")):0;i++){
					// console.log(Number(getUrlParam(`c${i+1}`)),Number(getUrlParam(`num${i+1}`)))
					initCeng(Number(getUrlParam(`c${i+1}`)),Number(getUrlParam(`num${i+1}`)))
				}
				
				// initBoll(5, 25, 90, 0, 0, null,  false);
				groupWork.initGroup("g1", "c0")
				initGrid()

				scene.add(bodyGroup);

				// animationZ()
				// animationY()
				var controls = new THREE.OrbitControls(camera, renderer.domElement);
				controls.addEventListener('change', function() {
					renderer.render(scene, camera)
				});
				renderer.clear();
				renderer.render(scene, camera);
			}
		</script>
	</body>
</html>
